@import '@/lib/reset.scss';

.banner-box {
    @include rect(1200px, 350px);
    // background: #ff0;
    margin: 0 auto;
    .banner-ul {
        @include rect(100%, 310px);
        li {
            @include rect(224px, 283px);
            // background: #0ff;
            float: left;
            margin: 0 8px;
            .banner_li {
                @include rect(224px, 224px);
                position: relative;
                overflow: hidden;
                .banner_img {
                    @include rect(224px, 224px);
                    background: #e2e2e2;
                    // display: none;
                    transition: all 0.6s;
                }
                //遮罩
                .cover_box {
                    position: absolute;
                    @include margin(0 0);
                    @include rect(224px, 224px);
                    background: rgba(0, 0, 0, 0.3);
                    line-height: 224px;
                    text-align: center;
                    z-index: 10;
                    display: none;
                    cursor: pointer;
                    .icon-videofill {
                        color: #fff;
                        font-size: 55px;
                    }
                }

            }
            &:hover .cover_box {
                display:block
            }
            &:hover .banner_img {
                transform: scale(1.1);
            }
            p {
                margin-top: 8px;
                width: 224px;
                line-height: 23px;
                cursor: pointer;
                @include text-color(#000);
                &:hover {
                    @include text-color(#31c27c);
                }
            }
            span {
                @include text-color(#999);
            }
        }
    }
}